<script lang="ts" setup>
import type { SwitchLabelPosition } from '@fluentui/web-components';

withDefaults(
  defineProps<{
    disabled?: boolean;
    labelPosition?: SwitchLabelPosition;
    name?: string;
    required?: boolean;
    value?: string;
  }>(),
  {
    disabled: false,
    required: false,
    name: undefined,
    value: undefined,
    labelPosition: 'after',
  },
);
const emit = defineEmits<{
  change: [checkType: boolean, event: Event];
}>();
const checked = defineModel<boolean>({
  default: false,
});
const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  checked.value = target.checked;
  emit('change', checked.value, event);
};
</script>

<template>
  <fluent-switch
    :checked="checked"
    :disabled="disabled"
    :required="required"
    :name="name"
    :value="value"
    :label-position="labelPosition"
    @change="handleChange"
  >
    <slot></slot>
  </fluent-switch>
</template>

<style scoped></style>
